<template>
	<view class="product">
		<Tabs @change="change" :list="listData" @scrolltolower="scrolltolower">
			<template :slot="current+'tabs'">
				<productItem :type="false" :list="list">
					<template v-slot:more>
						<u-loadmore marginTop="20" :status="loadStatus" @loadmore="scrolltolower" margin-top="50"/>
					</template>
				</productItem>
			</template>
			
		</Tabs>
		<TabBar :current-page="1" />
	</view>
</template>

<script>
	import Tabs from '@/components/tabs.vue'
	import productItem from '@/components/productItem.vue'
	import product from '@/api/product.js'
	import common from '@/api/common.js'
	export default {
		components: {
			Tabs,
			productItem //商品一项
		},
		data() {
			return {
				loadStatus: '',
				list: [], //数据
				title: 'Hello',
				userinfo: uni.getStorageSync('userinfo'),
				listData: [],
				page: 1,
				current: 0,
				category_id: '',
			}
		},
		onLoad() {
			this.getGoodsCate()
		},
		methods: {
			moreStatus(status) {
				this.loadStatus = status
			},
			scrolltolower(){
				if(this.loadStatus == 'nomore') return
				this.category_id = this.listData[this.current].id
				this.getGoodsList()
			},
			//商品分类
			async getGoodsCate() {
				const res = await common.getGoodsCate()
				this.listData = res.data
				if (!res.data.length) return
				this.category_id = res.data[this.current].id
				this.getGoodsList()
			},
			async getGoodsList() {
				this.moreStatus('loading')
				const res = await product.getGoodsList({
					category_id: this.category_id,
					page: this.page,
					page_size: 10,
					device_no: ''
				})
				res.data = res.data || []
				this.list = [...this.list,...res.data]
				if(res.data.length < 10) return this.moreStatus('nomore')
				if (res.data.total <= 10) {
					this.loadStatus = 'nomore'
				} else {
					this.moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
				}
				
				if (res.data.length === 0) return false
				this.page += 1 // 当前页加1
			},
			resetting(){
				this.list = []
				this.page = 1
			},
			change(i) {
				this.resetting()
				this.current = i
				this.category_id = this.listData[i].id
				this.getGoodsList()
			}
		}
	}
</script>
<style>
	page {
		background: #F2F2F2;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.product {
		height: 100%;
	}
</style>